<template>
	<view class="count">
		<view class="topCon">
			<u-tabs-swiper ref="tabs" inactive-color="#ada6a0" active-color="#2f2319" :bold="true" @change="tabsChange"
				:current="current" :list="lists" :is-scroll="false"></u-tabs-swiper>
		</view>
		<view v-if="rollList.length==0" class="zanwu f f-a-c f-j-c f-d-c">
			<image src="/static/my/youHui.png" class="myGuan" mode=""></image>
			<view class="tiShi">
				暂时还没有券哦
			</view>
		</view>
		<view class="body">
			<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
				<view v-for="(item,index) in rollList" :key="index" @click="tabsQie(item,index)" class="listItem">
					<view v-if="current==1||current==2" class="zheZhao">

					</view>
					<image src="/static/bg2.png" v-if="static==index" class="bg" mode=""></image>
					<image src="/static/bg1.png" class="bg" v-else mode=""></image>
					<view class="content f f-a-c">
						<view class="pric f f-a-c">
							￥<text>{{item.value}}</text>
						</view>
						<view class="untils">
							<view class="until">
								{{item.type==1?'抵扣券':'抵扣券'}}
							</view>
							<view class="time">
								有效期至 {{$u.timeFormat(item.expired_at, 'yyyy-mm-dd')}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [''],
				rollList: [{
					show: true
				}, {
					show: false
				}, {
					show: false
				}, {
					show: false
				}],
				current: 0,
				lists: [{
						name: '待使用',
						value: 0
					},
					{
						name: '已使用',
						value: 6
					},
					{
						name: '已过期',
						value: 1
					}
				],
			}
		},
		onShow() {
			this.rollList = []
			this.initList()
		},
		methods: {
			// 点击优惠卷跳转商城
			tabsQie() {
				uni.switchTab({
					url: '/pages/shoop/index'
				})
			},
			async initList() {
				let n = await this.$api.listDiscountPapers({
					status: this.current + 1
				})
				this.rollList = n.data
			},
			tabsChange(e) {
				this.current = e
				this.rollList = []
				this.initList()
			},
			onreachBottom() {
				console.log('1111');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.listItem {
		position: relative;
		width: 100%;
		height: 162rpx;
		margin-top: 20rpx;
		box-sizing: border-box;

		.zheZhao {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 99;
			background-color: rgba(255, 255, 255, .6);
		}

		.content {
			position: relative;
			height: 100%;
			padding-left: 53rpx;
			z-index: 1;

			.untils {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 600;
				color: #2f2319;
				margin-left: 120rpx;
			}

			.time {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				color: #ada6a0;
				margin-top: 10rpx;
			}

			.pric {
				font-size: 32rpx;
				font-family: HarmonyOS Sans, HarmonyOS Sans-500;
				font-weight: 600;
				color: #977961;

				text {
					font-size: 64rpx;
					font-family: HarmonyOS Sans, HarmonyOS Sans-700;
					font-weight: 700;
					color: #977961;
					margin-top: 15rpx;
				}
			}
		}

		.bg {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			// z-index: -1;
		}
	}

	/deep/ .u-scroll-bar {
		background-color: #977961 !important;
	}

	.body {
		height: calc(100vh - 90rpx);
		width: 100%;
		box-sizing: border-box;
		background-color: #f7f6f2;
		padding: 10rpx 30rpx;
	}

	.topCon {
		height: 90rpx;
		width: 100%;
		background: #fffefc;
	}

	.zanwu {
		position: fixed;
		top: 30%;
		left: 50%;
		transform: translate(-50%, -50%);

		.myGuan {
			width: 242rpx;
			height: 200rpx;
		}

		.tiShi {
			width: 450rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-400;
			font-weight: 400;
			text-align: center;
			color: $hui;
			margin: 30rpx 0;
		}

		.stroll {
			width: 180rpx;
			height: 88rpx;
			line-height: 85rpx;
			background: $brown;
			border-radius: 44rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-500;
			font-weight: 500;
			text-align: center;
			color: $bai;
		}
	}

	.count {
		height: 100vh;
		width: 100%;
		background-color: #fffefc;
	}
</style>